import { faker } from "@faker-js/faker";
import { ScrollArea } from "../ui/scroll-area";
import { ReportsCalendar } from "./reports-calendar";
import { ReportsListItem } from "./reports-list-item";

const template = {
  start: Date.now() - 1000 * 60 * 60 * 24 * 30,
  failed: 20,
  bug: 6,
  script: 8,
  env: 4,
  todo: 4,
};

const data = Array.from({ length: 11 }, (_, index) => {
  const isTodayData = index < 3;
  const startDate = isTodayData
    ? Date.now()
    : template.start +
      faker.number.int({ min: 1, max: 30 }) * 1000 * 60 * 60 * 24;

  return {
    id: faker.string.uuid(),
    title: faker.company.name(),
    start: startDate,
    duration: faker.date.recent(),
    total: faker.number.int({ min: 100, max: 300 }),
    passed: faker.number.int({ min: 100, max: 300 }),
    failed: faker.number.int({ min: 1, max: 10 }),
    skipped: faker.number.int({ min: 1, max: 10 }),
    broken: faker.number.int({ min: 1, max: 10 }),
    unknown: faker.number.int({ min: 1, max: 10 }),
    issue: faker.number.int({ min: 4, max: 40 }),
  };
});

export function ReportsList() {
  return (
    <div className="flex h-full w-full gap-4">
      <ReportsCalendar />
      <div className="flex h-full w-full flex-col justify-between gap-4">
        <ScrollArea className="h-full w-full">
          <div className="grid gap-4 xl:grid-cols-3 2xl:grid-cols-4">
            {data.map((report) => (
              <ReportsListItem report={report} key={report.id} />
            ))}
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}
